/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */
// 1.1 获取频道列表数据
const setChannleList = async () => {
  const res = await axios('/v1_0/channels')
  console.log(res.data)
  const htmlStr = '<option value="" selected="">请选择文章频道</option>' + res.data.channels.map(item => `<option value="${item.id}">${item.name}</option>`).join('')
  document.querySelector('.form-select').innerHTML = htmlStr
}
setChannleList()


// 目标2：封面设置
// 选择文件并保存在FormData
document.querySelector('.img-file').addEventListener('change', async e => {
  const file = e.target.files[0]
  const fd = new FormData()
  fd.append('image', file)
  // 单独上传图片并得到图片 URL 网址
  const response = await axios.post('/v1_0/upload', fd)
  console.log(response)
  // 回显并切回 img 标签展示（隐藏 + 号上传标签）
  const imgUrl = response.data.url
  document.querySelector('.rounded').src = imgUrl
  document.querySelector('.rounded').classList.add('show')
  document.querySelector('.place').classList.add('hide')
})

// 优化： 点击 img 可以重新切换封面
// 思路： img 点击 => 用js方式触发文件选择元素click 事件方法
document.querySelector('.rounded').addEventListener('click', () => {
  document.querySelector('.img-file').click()
})


// 发布文章 - 收集并保存
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerHTML !== '发布') return
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  // 发布文章的时候 不需要id属性 可以删除id 为后续做编辑使用
  delete data.id
  // 自己收集封面图片地址并保存到data对象中
  data.cover = {
    type: 1, // 封面类型
    images: [document.querySelector('.rounded').src] // 封面图片 URL
  }

  try {
    // axios 提交到服务器
    const response = await axios.post('/v1_0/mp/articles', data)
    // 调用提示用户
    myAlert(true, '发布成功')
    // 重置表单
    form.reset()
    // 封面要手动重置
    document.querySelector('.rounded').src = ''
    document.querySelector('.rounded').classList.remove('show')
    document.querySelector('.place').classList.remove('hide')
    // 富文本编辑器重置
    editor.setHtml('')

    setTimeout(() => {
      location.href = '../content/index.html'
    }, 1500)
  } catch (error) {
    myAlert(false, '发布错误')
  }
})



  // 进行文章的编辑
  // 自调用函数
  ; (function () {
    const paramsStr = location.search
    const params = new URLSearchParams(paramsStr)
    params.forEach(async (value, key) => {
      // 当前有要编辑的文章id 被传入过来
      console.log('#', value, key)
      if (key === 'id') {
        document.querySelector('.title span').innerHTML = '修改文章'
        document.querySelector('.send').innerHTML = '修改'
        const response = await axios(`/v1_0/mp/articles/${value}`)
        console.log(response)
        // 组织我需要的数据对象
        const dataObj = {
          channel_id: response.data.channel_id,
          title: response.data.title,
          rounded: response.data.cover.images[0],
          content: response.data.content,
          id: response.data.id
        }

        // 遍历数据对象属性 映射到页面
        Object.keys(dataObj).forEach(key => {
          if (key === 'rounded') {
            if (dataObj[key]) {
              document.querySelector('.rounded').src = dataObj[key]
              document.querySelector('.rounded').classList.add('show')
              document.querySelector('.place').classList.add('hide')
            }
            else if (key === 'content') {
              // 富文本内容
              editor.setHtml(dataObj[key])
            }
            else document.querySelector(`[name=${key}]`).value = dataObj[key]
          }
        })
      }
    })
  })()


// 目标5：保存文章
document.querySelector('.send').addEventListener('click', async e => {
  if (e.target.innerHTML !== '修改') return
  // 修改文章
  const form = document.querySelector('.art-form')
  const data = serialize(form, { hash: true, empty: true })
  try {
    const response = await axios.put(`/v1_0/mp/articles/${data.id}`, { ...data, cover: { type: document.querySelector('.rounded').src ? 1 : 0, images: [document.querySelector('.rounded').src] } })
    console.log(response)
    myAlert(true, '修改文章成功')
  }
  catch (error) {
    myAlert(false, '修改错误')
  }

})